'uyjea-/42<!-- 页面 -->
<template>
    <div class="shu">
        <div class="left" id="left" ref="con">

        </div>
        <div class="right" id="right" ref="con1">

        </div>
        <div class="buttom" id="buttom" ref="con2">

        </div>
    </div>
</template>
<!-- vue -->
<script>

import * as echarts from 'echarts';
export default {
    name: 'ec',
    data() {
        return {
            // 声明的属性
            //饼圆
            chart: null,
            chart1: null,
        }
    },

    //生命周期函数
    mounted() {
        this.initLineCharts();

    },
    beforeDestroy() {
        this.destroyChart();
    },
    // 调用方法
    methods: {
        initLineCharts() {
            const option = {
                series: [
                    {
                        type: 'pie',
                        data: [
                        ],
                        radius: '50%'
                    }
                ]
            };

            const option1 = {
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        data: []
                    }
                ]
            };

            const option2 = {
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        data: [],
                        type: 'line',
                        label: {
                            show: true,
                            position: 'bottom',
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    }
                ]
            };

            this.chart = echarts.init(document.getElementById('left'))
            this.chart1 = echarts.init(document.getElementById('right'))
            this.chart2 = echarts.init(document.getElementById('buttom'))

            this.$axios.get('https://meituan.thexxdd.cn/apit/analysis').then(res => {
                res.data.data[0].forEach(item => {
                    option.series[0].data.push(item)
                })
                
                res.data.data[1].forEach(item => {
                    var arr = Object.values(item)
                    option1.xAxis.data.push(item.age)
                    option1.series[0].data.push(arr[1])

                })
                res.data.data[2].forEach(item => {
                    var arr = Object.values(item)
                    option2.xAxis.data.push(item.month)
                    option2.series[0].data.push(arr[1])

                })

                this.chart.clear()
                this.chart1.clear()
                this.chart2.clear()
                this.chart.setOption(option)
                this.chart1.setOption(option1)
                this.chart2.setOption(option2)
            })

            this.chart.setOption(option)
            this.getimg;
        },
        destroyChart() {
            if (this.chart) {
                this.chart.clear()
                this.chart = null
            }
            if (this.chart1) {
                this.chart.clear()
                this.chart = null
            }
        }
    },
    computed: {
        getimg() {
            this.echarts = echarts.init(this.$refs.con);
            this.echarts = echarts.init(this.$refs.con1);
            this.echarts = echarts.init(this.$refs.con2);
            // this.echarts.setOption(option);

        }

    },
    // 监听器
    watch: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shu {
    width: 100%;
    height: 100%;
}

.shu .left {
    width: 49%;
    height: 45%;
    background: white;
    float: left;
}

.shu .right {
    width: 49%;
    height: 45%;
    background: white;
    float: right;
}

.shu .buttom {
    width: 100%;
    height: 45%;
    background: white;
    margin-top: 20px;
    float: right;
}
</style>